<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
 <canvas id="canvas" width="200" height="200" border="1px solid #ccc"></canvas>
  <script>
	var img = new Image();
	var date = new Date(); //日期对象
	var now = "";
	var imgObject = '22222222222'
	now = date.getFullYear()+"-"; //读英文就行了
	now = now + (date.getMonth()+1)+"-";//取月的时候取的是当前月-1如果想取当前月+1就可以了
	now = now + date.getDate()+" ";
	now = now + date.getHours()+":";
	now = now + date.getMinutes()+":";
	now = now + date.getSeconds()+"";
	img.src = 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png'; // 要压缩的图片
	img.onload = function() {
		var canvas = document.getElementById('canvas')//document.createElement("canvas");
		canvas.width = 500//img.width;
		canvas.height = 500//img.height;
		var ctx = canvas.getContext("2d");
		//  将图片画到canvas上面
		ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width, img.height);
		ctx.beginPath();
		// 控制旋转坐标 (x坐标, y坐标)
		ctx.translate(-canvas.width+50,canvas.height);  
		ctx.rotate(-90*Math.PI/180);
		ctx.fillStyle = "rgba(165, 165, 165, 0.4)";
		ctx.moveTo(0, canvas.height);
		ctx.lineTo(ctx.measureText(now).width+30, canvas.height);//右下
		ctx.lineTo(ctx.measureText(now).width+30, canvas.height-50);//右上
		ctx.lineTo(0, canvas.height-50);//左上
		ctx.closePath();
		ctx.fill();
		ctx.font="12px Arial";
		console.log(ctx.measureText(now).width)
		ctx.strokeText(now,10,canvas.height-30);
		ctx.strokeText(imgObject,10,canvas.height-10);
		// 使用Canvas压缩
		//var preImg = canvas.toDataURL("image/png", 0.5);
		//document.getElementById('imgs').src = preImg
		console.dir(canvas)
	}
  </script>	
 </body>
</html>